<template>
  <view>
    <view>
      <u-popup :show="show3" :round="10" @close="close" @open="open">
        <view style="width: 100vw;height: 88vh;position: relative;">
          <view class="close" @click="show3 = show">
            X
          </view>
          <view class="top-top">
            <!-- 导航栏 -->
            <view class="nav">
              <view v-for="(item,i) in navlist" :key="i" @click="show = i"
                :class="show == i ?'navtit navtitshow':'navtitshow'">
                {{item.tit}}
              </view>
            </view>
            <!-- 导航栏 -->
            <!-- 第二个导航栏 -->
            <view class="nav2">
              <view class="nav2first">
                排序：
              </view>
              <view class="nav2list">
                <view class="nav2item" v-for="(item,index) in nav2list" :key="index" @click="show2 = index">
                  {{item.tit}}
                  <view :class="show2 == index?'nav2itemline':'nav2itemlinedis'">
                  </view>
                  <view :class="show2 == index?'upimg':'upimgshow'">
                    <image :src="item.upimg" mode="" style="width: 16rpx;height: 6rpx;"></image>
                  </view>
                  <view :class="show2 == index?'downimg':'downimgshow'">
                    <image :src="item.downimg" mode="" style="width: 16rpx;height: 6rpx;"></image>
                  </view>
                </view>
              </view>
            </view>
            <!-- 第二个导航栏 -->
            <!-- 内容 -->
            <view class="content">
              <scroll-view class="contentscroll">
                <!-- 全部区 -->
                <view class="allbox" v-show="show == 0">
                  <!-- 全部距离区 -->
                  <view class="all-km" v-show="show2 == 0">
                    <view class="all">
                      <!-- 1 -->
                      <view class="allitem">
                        <view>
                          <image src="../../static/resort/indeximg1.png" mode="" style="width: 100%;height: 310rpx;">
                          </image>
                        </view>
                        <view class="allitemtext">
                          <span>又大又新鲜的水果送啦
                            <br />
                            这里最多两行
                          </span>
                        </view>
                        <view class="allitemthreebox">
                          <view class="kmbox">
                            <image src="../../static/resort/dingwei-green.png" mode=""
                              style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                            <view class="kmboxtext">
                              0.56km
                            </view>
                          </view>
                          <view class="address">
                            武汉市·飞飞排档
                          </view>
                        </view>
                        <view class="price">
                          ￥2元/斤
                        </view>
                      </view>
                      <!-- 2 -->
                      <view class="allitem">
                        <view>
                          <image src="../../static/resort/indeximg2.png" mode="" style="width: 100%;height: 310rpx;">
                          </image>
                        </view>
                        <view class="voicebox">
                          <view class="voicetext">
                            这个地方显示的···60''
                          </view>
                          <view>
                            <image src="../../static/resort/voice.png" mode=""
                              style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
                            </image>
                          </view>
                        </view>
                        <view class="allitemthreebox">
                          <view class="kmbox">
                            <image src="../../static/resort/dingwei-green.png" mode=""
                              style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                            <view class="kmboxtext">
                              645km
                            </view>
                          </view>
                          <view class="address">
                            郑州市·动物园
                          </view>
                        </view>
                        <view class="price">
                          ￥5000元/吨
                        </view>
                      </view>
                      <!-- 3 -->
                      <view class="allitem">
                        <view>
                          <image src="../../static/resort/indeximg3.png" mode="" style="width: 100%;height: 310rpx;">
                          </image>
                        </view>
                        <view class="voicebox2">
                          <view>
                            <image src="../../static/resort/voice.png" mode=""
                              style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
                            </image>
                          </view>
                          <view class="voicetext">
                            23''
                          </view>
                        </view>
                        <view class="allitemthreebox">
                          <view class="kmbox">
                            <image src="../../static/resort/dingwei-green.png" mode=""
                              style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                            <view class="kmboxtext">
                              1485km
                            </view>
                          </view>
                          <view class="address">
                            上海市·东方明珠
                          </view>
                        </view>
                        <view class="price">
                          ￥8000元/月
                        </view>
                      </view>
                      <!-- 4 -->
                      <view class="allitem">
                        <view>
                          <image src="../../static/resort/indeximg1.png" mode="" style="width: 100%;height: 310rpx;">
                          </image>
                        </view>
                        <view class="allitemtext">
                          <span>又大又新鲜的水果送啦
                            <br />
                            这里最多两行
                          </span>
                        </view>
                        <view class="allitemthreebox">
                          <view class="kmbox">
                            <image src="../../static/resort/dingwei-green.png" mode=""
                              style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                            <view class="kmboxtext">
                              0.56km
                            </view>
                          </view>
                          <view class="address">
                            武汉市·飞飞排档
                          </view>
                        </view>
                        <view class="price">
                          ￥2元/斤
                        </view>
                      </view>
                      <!-- 5 -->
                      <view class="allitem">
                        <view>
                          <image src="../../static/resort/indeximg3.png" mode="" style="width: 100%;height: 310rpx;">
                          </image>
                        </view>
                        <view class="voicebox2">
                          <view>
                            <image src="../../static/resort/voice.png" mode=""
                              style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
                            </image>
                          </view>
                          <view class="voicetext">
                            23''
                          </view>
                        </view>
                        <view class="allitemthreebox">
                          <view class="kmbox">
                            <image src="../../static/resort/dingwei-green.png" mode=""
                              style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                            <view class="kmboxtext">
                              1485km
                            </view>
                          </view>
                          <view class="address">
                            上海市·东方明珠
                          </view>
                        </view>
                        <view class="price">
                          ￥8000元/月
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 全部距离区 -->
                  <!-- 全部价格区 -->
                  <view class="all-price" v-show="show2 == 1">
                    全部价格
                  </view>
                  <!-- 全部价格区 -->
                  <!-- 全部成交区 -->
                  <view class="all-price" v-show="show2 == 2">
                    全部成交
                  </view>
                  <!-- 全部成交区 -->
                  <!-- 全部品牌区 -->
                  <view class="all-price" v-show="show2 == 3">
                    全部品牌
                  </view>
                  <!-- 全部品牌区 -->
                </view>
                <!-- 全部区 -->
              </scroll-view>
            </view>
            <!-- 内容 -->
          </view>
        </view>
      </u-popup>
      <u-button @click="show3 = true">打开</u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show3: true,
        show: 0,
        show2: 0,
        navlist: [{
            tit: "全部"
          },
          {
            tit: "生活"
          },
          {
            tit: "情感"
          },
          {
            tit: "法律"
          },
          {
            tit: "健康"
          },
          {
            tit: "医疗"
          },
          {
            tit: "创业"
          }
        ],
        nav2list: [{
            tit: '距离',
            upimg: '/static/resort/upjiantou.png',
            downimg: '/static/resort/downjiantou.png'
          },
          {
            tit: '价格',
            upimg: '/static/resort/upjiantou.png',
            downimg: '/static/resort/downjiantou.png'
          },
          {
            tit: '成交',
            upimg: '/static/resort/upjiantou.png',
            downimg: '/static/resort/downjiantou.png'
          },
          {
            tit: '品牌',
            upimg: '/static/resort/upjiantou.png',
            downimg: '/static/resort/downjiantou.png'
          },
        ]
      };
    },
    methods: {
      open() {
        // console.log('open');
      },
      close() {
        this.show = false
        // console.log('close');
      }
    }
  }
</script>

<style lang="scss">
  .close {
    position: absolute;
    font-size: 40rpx;
    font-weight: bold;
    top: 10rpx;
    right: 45rpx;
    color: #646464;
  }

  // 头部
  page {
    // background-color: #F5F5F5;
    background-color: #ddd;
  }

  .search {
    // height: 100vh;
    padding-bottom: 30rpx;
  }

  // 头部
  .top-top {
    margin-top: 50rpx;
    width: 100vw;
    z-index: 99;
    // position: absolute;
    // top: 0;
    background-color: white;
  }

  .topbox {
    width: 95%;
    margin: auto;

    .top-oneitem {
      width: 100%;
      height: var(--status-bar-height);
    }

    .top-twoitem {
      height: 100rpx;
      width: 100%;
      display: flex;

      .top-search {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 15rpx;
        margin-top: 14rpx;
        width: 65%;
        height: 75rpx;
        border-radius: 50rpx;
        background-color: #F1F1F1;

        .top-search-input {
          height: 32rpx;
          margin-top: 15rpx;
          width: 250rpx;
        }

        .top-search-line {
          height: 44rpx;
          border-right: solid 1px #BBBDBD;
          margin-top: 15rpx;
        }

        .top-search-text {
          color: #58719D;
          margin-top: 13rpx;
        }
      }

      .top-but {
        width: 35%;

        .topbutton {
          line-height: 60rpx;
          color: white;
          font-size: 32rpx;
          margin-top: 20rpx;
          width: 80%;
          height: 60rpx;
          text-align: center;
          background-color: #FF2A31;
        }
      }
    }
  }

  // 导航栏
  .nav {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin-top: 10rpx;
    height: 68rpx;
    padding: 0 32rpx;
    color: #838383;

    .navtit {
      color: #FF2A31;
      padding-top: 10rpx;
      font-size: 32rpx;
      position: relative;
    }

    .navtitshow {
      padding-top: 10rpx;
      font-size: 32rpx;
      // position: relative;
    }

    .navtit::after {
      content: "";
      // z-index: 999;
      border-bottom: solid 4rpx #FF2A31;
      position: absolute;
      top: 60rpx;
      right: 0;
      width: 64rpx;
      height: 4rpx;
    }

  }

  // 导航栏
  // 第二个导航栏
  .nav2 {
    padding: 15rpx;
    box-sizing: border-box;
    width: 100%;
    height: 80rpx;
    // background-color: #58719D;
    display: flex;

    .nav2first {
      padding-left: 20rpx;
      color: #838383;
    }

    .nav2list {
      padding-top: 3rpx;
      margin-left: 60rpx;
      width: 70%;
      display: flex;
      justify-content: space-between;

      .nav2itemshow {
        font-weight: bold;
      }

      .nav2item {
        font-weight: bold;
        position: relative;

        .upimg {
          position: absolute;
          top: -14rpx;
          left: 80rpx;
        }

        .upimgshow {
          position: absolute;
          top: -14rpx;
          left: 80rpx;
          display: none;
        }

        .downimgshow {
          position: absolute;
          top: 0rpx;
          left: 80rpx;
          display: none;
        }

        .downimg {
          position: absolute;
          top: 0rpx;
          left: 80rpx;
        }
      }

      .nav2itemline {
        border-bottom: solid 4rpx #FF2A31;
        position: absolute;
        top: 55rpx;
        left: 0;
        width: 60rpx;
        height: 4rpx;
      }

      .nav2itemlinedis {
        border-bottom: solid 4rpx #FF2A31;
        position: absolute;
        top: 55rpx;
        left: 0;
        width: 60rpx;
        height: 4rpx;
        display: none;
      }

    }
  }

  // 第二个导航栏
  // 头部
  // 内容
  // 全部区
  .allbox {
    padding-bottom: 150rpx;
    box-sizing: border-box;
    padding: 18rpx;
    width: 100vw;
    background-color: #E5E5E5;

    .all {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .allitem {
        margin-bottom: 20rpx;
        width: 49%;
        padding-bottom: 20rpx;
        border-radius: 20rpx;
        background-color: white;

        .allitemtext {
          font-weight: bold;
          padding: 0 10rpx;
          box-sizing: border-box;
          font-size: 30rpx;
        }

        .voicebox {
          margin-top: 8rpx;
          margin-bottom: 10rpx;
          width: 85%;
          height: 70rpx;
          background-color: #FF6A6F;
          border-radius: 5rpx;
          margin-left: 12%;
          padding: 0 10rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          color: white;
          line-height: 70rpx;

          .voicetext {
            font-size: 26rpx;
          }
        }

        .voicebox2 {
          margin-top: 8rpx;
          margin-bottom: 10rpx;
          width: 55%;
          height: 70rpx;
          background-color: #FF6A6F;
          border-radius: 5rpx;
          margin-left: 2%;
          padding: 0 10rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: left;
          color: white;
          line-height: 70rpx;

          .voicetext {
            margin-left: 10rpx;
            font-size: 26rpx;
          }
        }

        .allitemthreebox {

          display: flex;
          justify-content: space-between;
          padding: 10rpx 10rpx;
          box-sizing: border-box;

          .kmbox {
            display: flex;

            .kmboxtext {
              padding-left: 5rpx;
              font-size: 26rpx;
              color: #07C160;
            }
          }

          .address {
            font-size: 26rpx;
          }
        }

        .price {
          font-weight: bold;
          color: #FF2A31;
          font-size: 30rpx;
        }
      }
    }
  }

  // 全部区
  // 内容
</style>